<template>
  <div id="home">
    <nav-bar class="home-bar">
      <template v-slot:center>
        <div>购物街</div>
      </template>
    </nav-bar>
    <!-- 滚动里无法实现吸顶效果，这里多复制一份用来实现吸顶效果 -->
    <tab-control :title="['流行','新款','精选']" @tabClick="tabClick" class="tab-control" v-show="isFixed" ref="tabControl1"/>
    <scroll class="content" ref="scroll" 
    :probe-type="3" 
    @scroll="contentScroll"
    :pull-up-load="true"
    @pullingUp="loadMore">
      <my-swiper :images="swiperImages"/>
      <tab-control :title="['流行','新款','精选']" @tabClick="tabClick" ref="tabControl2"/>
      <goods-list :goods="goods[currentType].list"/>
    </scroll>
    <!-- 监听组件原生事件，加native -->
    <back-top @click.native="backClick" v-show="isShowBackTop"/>
  </div>
</template>

<script>
import NavBar from 'components/common/NavBar.vue'
import TabControl from 'components/common/TabControl.vue'
import GoodsList from 'components/context/goods/GoodsList.vue'
import Scroll from 'components/common/Scroll.vue'
import BackTop from 'components/common/BackTop.vue'
import MySwiper from 'components/common/MySwiper.vue'
import {getGoodsList} from 'network/home.js'
import {debance} from 'common/utils.js'
import img0 from 'assets/img/swiper1.jpg'
import img1 from 'assets/img/swiper2.jpg'
import img2 from 'assets/img/swiper3.jpg'
import img3 from 'assets/img/swiper4.jpg'
export default {
  name: 'Home',
  components:{
    NavBar,
    TabControl,
    GoodsList,
    Scroll,
    BackTop,
    MySwiper
  },
  data(){
    return {
      swiperImages:[img0, img1, img2, img3],
      beforeTabIndex: 0,
      scrollY: [0, 0, 0], // 保存滚动的距离
      isFixed: false, //控制tab-control是否吸顶
      tabControlOffsetTop: 0, // tab-control距离顶部距离
      isShowBackTop: false, //控制返回顶部按钮显示隐藏
      currentType: 'pop',
      goods: {
        'pop': {page:0, list:[]},
        'new': {page:0, list:[]},
        'sel': {page:0, list:[]}
      }
    }
  },
  created(){
    this.getHomeList('pop');
    this.getHomeList('new');
    this.getHomeList('sel');
  },
  mounted(){
    // 图片加载完毕，刷新滚动
    const refresh = debance(this.$refs.scroll.refresh, 50);
    this.$bus.$on('imageLoad', ()=>{
      refresh();
    });
    this.tabControlOffsetTop = this.$refs.tabControl2.$el.offsetTop;
    // console.log(this.tabControlOffsetTop)
  },
  activated(){
    // 跳转至保存的滚动距离位置
    this.$refs.scroll.scrollTo(0, this.scrollY[this.$refs.tabControl2.currentIndex], 0);
    this.$refs.scroll.refresh();
  },
  deactivated(){
    // 离开首页时，保存滚动的距离
    this.scrollY[this.$refs.tabControl2.currentIndex] = this.$refs.scroll.getScrollY();
  },
  methods:{
    //获取数据 
    async getHomeList(type){
      const res = await getGoodsList(type, this.goods[type].page);
      this.goods[type].page += 1;
      // console.log(res)
      switch(type){
        case 'pop':
          this.goods[type].list.push(...res.list) ;
          break;
        case 'new':
          this.goods[type].list.push(...res.list) ;
          break;
        case 'sel':
          this.goods[type].list.push(...res.list) ;
          break;
      }
    },
    // 事件处理函数
    // tab栏切换
    tabClick(index){
      this.scrollY[this.beforeTabIndex] = this.$refs.scroll.getScrollY();
      this.$refs.tabControl1.currentIndex = index;
      this.$refs.tabControl2.currentIndex = index;
      this.beforeTabIndex = index;
      switch(index){
        case 0:
          this.currentType = 'pop';
          break;
        case 1:
          this.currentType = 'new';
          break;
        case 2:
          this.currentType = 'sel';
          break;
      }
      this.$nextTick(()=>{
        this.$refs.scroll.scrollTo(0, this.scrollY[index], 0);
        this.$refs.scroll.refresh();
      })
    },
    // 返回顶部
    backClick(){
      // x,y,滚动至顶部的过度时间
      this.$refs.scroll.scrollTo(0, 0, 500);
    },
    // 滚动事件
    contentScroll(position){
      // 返回顶部按钮显示隐藏判断
      this.isShowBackTop = -position.y > 1000 ? true : false;
      // tab-control吸顶判断
      this.isFixed = -position.y > this.tabControlOffsetTop ? true : false;
    },
    // 上拉至底加载更多
    loadMore(){
      this.getHomeList(this.currentType);
      this.$refs.scroll.finishPullUp();
    }
  }
}
</script>
<style lang="less" scoped>
#home{
  height: 100%;
  position: relative;
  .home-bar{
    background-color:pink;
    color: #fff;
    font-size: 14px;
  }
  .tab-control{
    position: relative;
    left: 0;
    right: 0;
    z-index: 9;
    font-size: 13px;
  }
  .content{
    overflow: hidden;
    position: absolute;
    top: 45px;
    bottom: 49px;
    left: 0;
    right: 0;
    .adv{
      height: 100px;
      line-height: 100px;
      text-align: center;
    }
    // sticky在better-scroll内失效
    // .tab-control{
    //   position: sticky;
    //   top: 0px;
    //   z-index: 9;
    // }
  }
}
</style>
